<template>
	<view class="page-search">
		<view class="index-header">
			<view class="index-header-v">
				<image class="test1" @click="clickGoHomeEvent" src="../../static/search-img/左箭头.png"></image>
				<text>输入标题或关键字查优惠券</text>
				<image class="test1" src="../../static/home/conent/列表选择.png"></image>
			</view>
		</view>
		<view class="search-iptsearh">
			<view class="search-input"><input type="text" v-model="searInput" placeholder="长按手机淘宝商品标题，复制宝贝标题后，点这里后长按并粘贴" /></view>
			<view class="search-btn"><button class="search-btn-child" @click="goSecondSearchClick">点击搜索优惠卷</button></view>
		</view>
		<view class="search-main">
			<view class="search-mian-header"><text>使用教程</text></view>
			<view class="search-main-body">
				<text>手机淘宝长按商品标题，复制宝贝标题后，到这里粘贴。</text>
				<view class="search-main-body-one">
					<text>形如:</text>
					<text>春季打底裤女外穿夏季薄款韩版2017新款女裤黑色九分裤子百搭小脚</text>
				</view>
				<view class="search-main-body-two">
					<text>也可以输入关键字查找，比如：</text>
					<text>新款女裤</text>
				</view>
			</view>
			<view class="search-mian-img"><image src="../../static/search-img/wap1.jpg" mode=""></image></view>
		</view>
		<view class="search-bootom"><text>copyright © 爽淘淘</text></view>
		<view class="search-footer"></view>
		
		
		
		<!-- 点击向上组件 -->
		<view><click-up v-show="isTopEvent"></click-up></view>
		<!-- 粘性布局中的搜索组件 -->
		<view><goode-search  v-show="isTopEvent"></goode-search></view>
	</view>
</template>

<script>
	// 引入搜索组件
	import goodeSearch from '../../components/goods-search/itemSearch.vue';
	
	import clickUp from '../../components/click-up/click-up.vue';
	
export default {
	data() {
		return {
			searInput:"",
			isTopEvent:false,
		};
	},
	components:{
		clickUp,goodeSearch,
	},
	methods: {
		clickGoHomeEvent(){
			uni.switchTab({
				url:'../index/index'
			})
		},
		//跳转到二级页面让其自己发送请求
		goSecondSearchClick() {
			uni.navigateTo({
				url: `/pages/second-pages/search-content?searInput=${this.searInput}`
			});
			// 输入框置空
			this.searInput = '';
		}
	},
	//监听页面级滚动
	onPageScroll(v) {
		if (v.scrollTop > 400) {
			this.isTopEvent = true;
		} else {
			this.isTopEvent = false;
		}
	},
};
</script>

<style scoped lang="scss">
.page-search {
	width: 100vw;
	height: calc(100vh - 50px);
	.search-footer {
		width: 100%;
		height: 50px;
	}
	// 设置头部导航
	.index-header {
		background: linear-gradient(138deg, #f40497, #f81131);
		width: 100%;
		.index-header-v {
			margin: 0 auto;
			width: 90%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			text-align: center;
			font-size: 35upx;
			color: #ffffff;
			height: 46px;
			image {
				width: 57upx;
				height: 57upx;
			}
			text {
				width: 80%;
			}
		}
	}
	//设置搜索
	.search-iptsearh {
		width: 100vw;
		.search-input {
			width: 98%;
			height: 80upx;
			border-radius: 60upx;
			box-sizing: border-box;
			border: 2upx solid gray;
			margin: 0 auto;
			margin-top: 30upx;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: -2upx 2upx 2upx gray;
			// background: ;
			input {
				width: 90%;
				font-size: 22upx;
			}
		}
		.search-btn {
			margin-top: 30upx;
			margin-bottom: 30upx;
			width: 100%;
			button {
				width: 60%;
				margin: 0 auto;
				border-radius: 60upx;
				background-color: #f50972 !important;
				height: 90upx;
				color: #ffffff;
			}
		}
	}
	//设置主内容样式
	.search-main {
		width: 100vw;
		.search-mian-header {
			width: 100%;
			height: 80upx;
			background-color: #f50972;
			color: #ffffff;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 60upx;
		}
		.search-main-body {
			margin-top: 30upx;
			width: 100%;
			& > text:nth-child(1) {
				font-size: 30upx;
				margin-bottom: 20upx;
				display: block;
			}
			.search-main-body-one,
			.search-main-body-two {
				font-size: 30upx;
				& > text:nth-child(2) {
					font-size: 35upx;
					color: #eb3e14;
					font-weight: 700;
				}
			}
			.search-main-body-two {
				width: 100%;
				margin-top: 30upx;
			}
		}
		.search-mian-img {
			width: 100%;
			text-align: center;
			image {
				width: 680upx;
				height: 1206upx;
			}
		}
	}

	//设置版权
	.search-bootom {
		width: 100%;
		font-size: 30upx;
		height: 120upx;
		text-align: center;
		margin-top: 20upx;
		text {
			color: gray;
		}
	}
}
</style>
